<template>
    <div class="third-party-login">
      <div class="divider">
        <span class="divider-text">其他登录方式</span>
      </div>
      <div class="login-methods">
        <!-- <el-tooltip v-for="item in methods" :key="item.type" :content="item.name" placement="top">
          <el-button circle @click="$emit('login', item.type)">
            <i class="fab fa-weixin" />
            <el-icon :size="20"><component :is="item.icon" /></el-icon>
          </el-button>
        </el-tooltip> -->

        <el-tooltip content="微信登录" placement="top">
          <el-button circle @click="$emit('login', 'wechat')">
            <i class="fab fa-weixin" />
          </el-button>
        </el-tooltip>
        <el-tooltip content="支付宝登录" placement="top">
          <el-button circle @click="$emit('login', 'alipay')">
            <i class="fab fa-alipay" />
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  defineEmits(['login'])
  </script>
  
  <style lang="scss" scoped>
  .third-party-login {
    .divider {
      display: flex;
      align-items: center;
      margin: 20px 0;
      color: #999;
      
      &::before, &::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #eee;
      }
      
      .divider-text {
        padding: 0 10px;
      }
    }
    
    .login-methods {
      display: flex;
      justify-content: center;
      gap: 15px;
      
      .el-button {
        width: 40px;
        height: 40px;
      }
    }
  }
  </style>